// 1, 生成随机验证码
$('#sc').html( mySetVc() ).click(function(){ $('#sc').html(mySetVc()) });


// $('#sc').html(mySetVc()).click(function(){ $(this).html(mySetVc()) });

// 2, 点击 注册按钮 获取数据 进行验证 发送请求
$('button').click(function(){
  // 1  获取数据 
  let name = $('[name="name"]').val();
  let pwd1 = $('[name="pwd1"]').val();
  let pwd2 = $('[name="pwd2"]').val();
  let vc = $('[name="vc"]').val();

  console.log( pwd1 );
  // 2  数据验证
  // 简单验证 两个密码一致 验证码一致

  // 两次密码必须完全一致
  // 如果 两个密码 不一致 执行 return 终止之后程序的操作
  // if( pwd1 !== pwd2 ){ 
  //   // 写入 密码不一致的提示信息
  //   $('[name="pwd1Span"]').html('您两次输入的密码不一致');

  //   // 刷新 验证码
  //   $('#sc').html(mySetVc());

  //   return ;

  // }else{
  //   // 密码一致 清除 密码不一致的提示信息
  //   $('[name="pwd1Span"]').html('');
  // } 

  // 验证码 要 一致
  // input标签输入的数据 和 span标签写入的内容 一致
  // 如果 区分大小写 直接 进行 === 全等比较 
  // 如果 不区分大小写 先 统一 大小写 再进行 === 全等比较
  // if( vc.toLowerCase() !== $('#sc').html().toLowerCase() ){
  //   // 写入 验证码 不一致的提示信息
  //   $('[name="vcSpan"]').html('您两次输入的验证码不一致');

  //   // 刷新 验证码
  //   $('#sc').html(mySetVc());

  //   return ;

  // }else{
  //   // 两次 验证码 一直 清除 验证码错误提示信息
  //   $('[name="vcSpan"]').html('');

  // }

  // 使用 async函数 通过 await方法 调用 promise赋值的函数
  // async 封装的函数 调用数据 需要以参数的形式传参
  setRegister( name , pwd1 );

})


// 3, 给 input标签添加 change
// 失去焦点 并且 input标签的数据 和 获取焦点时数据不同 触发事件
$('[name="name"]').change(function(){
  // 获取数据
  // let name = $(this).val();
  let name = this.value ;

  // 调用 async 声明的函数 通过 await 发送请求
  isName( name );

})

// 提前定义 要执行的 async 函数
// 因为 async 声明函数的特殊性 不能直接调用 函数外部定义的数据 
// 必须 以 参数的形式 传参 需要调用的数据数值
async function setRegister( name , pwd ){

  // 通过 await 调用 promise封装函数
  // 变量中存储的是 响应体数据
  
  // 请求地址是 相对路径
  const res = await  myPromiseJQueryAjax( '../server/goods_register.php' , 'post' , {userName:name , userPwd:pwd} , 'json');

  // 请求地址是 url地址
  // const res = await  myPromiseJQueryAjax( 'http://127.0.0.1/wh_2202/week6_day01/shop1/server/goods_register.php' , 'post' , {userName:name , userPwd:pwd} , 'json');
  
  console.log( res );

  // 根据res中存储的响应体结果 生成页面内容

  if( res.code === 1 ){
    // 如果注册成功 弹窗 跳转回 首页面
    window.alert('恭喜您 注册成功 点击确定 跳转 首页面');
    window.location.href = './index.html';

  }else if( res.code === 0 ){
    // 弹出错误提示信息
    window.alert('您输入的账号重复 请您重新选择账号');

  }

}

// 提前定义 只要执行的 async函数
// 发送请求 判断 账号 是不是重复
async function isName( name ){
  // 向 后端程序 发送请求 根据结果动态渲染页面
  const res = await myPromiseJQueryAjax( '../server/goods_select_name.php' , 'post' , {userName:name} , 'json' );
  console.log( res );

  if( res.code === 0 ){
    // 写入提示信息
    $('[name="nameSpan"]').html('您的用户名已经被注册,请您更换用户名');

  }else if( res.code === 1 ){
    // 写入提示信息
    $('[name="nameSpan"]').html('恭喜您,您的用户名可以使用');
  }

}

/*
  注册页面 需求分析

  1,  实现 验证码 

      实际项目中 一般是 通过 第三方机构完成 验证码操作 
      我们当前 就 随机生成一个本地的验证码

      使用 随机验证码 函数 实现 

  2,  点击登录 

      获取数据信息 

      验证数据信息

      发送 ajax请求 执行注册操作
        通过 promise封装函数 和 async await 发送请求

      根据 后端响应的结果 判断 注册结果 
      执行不同的 前端程序

  3,  根据后端程序 判断 请求地址 请求方式 携带参数 响应体格式

      向 server/goods_register.php 文件 发送请求
        地址 可以是 相对路径 可以是url地址
        
      以 post 方式 向后端程序 传参 2个参数 
        键名是 userName userPwd

      响应体格式 是 json字符串 

  4,  所有的js程序 都要定义成 外部文件
      不能定义成 内部式 


*/